<template>
  <div class="imgUpload-path">
    <el-upload
      ref="upload"
      multiple
      :before-upload="handleChange"
      list-type="picture-card"
      :action="action"
      :data="params"
      :before-remove="handleRemove"
      :limit="limit"
      :on-success="handleSuccess"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :accept="accept"
      :headers="headers"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <div class="upload-tip">
      <p>
        <!--  文件格式为
        <span v-for="(item, index) in typeLimit" :key="index" class="mr10">{{
          item
        }}</span> -->
      </p>
      <p>
        <!--   文件大小不能超过 {{ sizeLimit }} MB -->
        <!--         <span v-if="limit">，最多可上传{{ limit }}张图片</span> -->
      </p>
    </div>
    <el-dialog :visible.sync="isShow" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      fileList: [],
      isShow: false,
      dialogImageUrl: "",
      action: this.$baseUrl + "/api/admin/upload",
      headers: {
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
    };
  },
  props: {
    limit: {
      type: Number,
    },
    typeLimit: {
      type: Array,
      default: () => [".jpg", ".jpeg", ".png"],
    },
    sizeLimit: {
      type: Number,
      default: 2,
    },
    imgsDefalut: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    accept() {
      return this.typeLimit.join(",");
    },
  },
  watch: {
    imgsDefalut: {
      handler: function (val) {
        /*    val.forEach((item) => {
          item.url = item.url.replace(this.$path, "");
        }); */
        this.fileList = val;
      },
      immediate: true,
    },
  },
  methods: {
    handleSuccess(res, file) {
      this.$emit("success", res?.data?.path);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.isShow = true;
    },
    handleChange(file) {
      let canUpload = true; //是否可以上传
      let fileName = file.name;
      let size = file.size / 1024 / 1024 < this.sizeLimit;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (!this.typeLimit.includes(lastName)) {
        Message({
          message: `文件格式只能是${this.typeLimit}`,
          type: "warning",
          offset: "180",
        });
        canUpload = false;
      }
      if (!size) {
        Message({
          message: `文件格式不能超过${this.sizeLimit}MB`,
          type: "warning",
          offset: "180",
        });
        canUpload = false;
      }
      return canUpload;
    },
    async handleRemove(file, fileList) {
      this.$emit("remove", file?.response?.data?.path);
    },

    clear() {
      this.$refs["upload"].clearFiles();
    },
  },
};
</script>

<style lang="less">
.imgUpload-path {
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    font-size: 30px;
    color: #b5b5b5;
    background: #fbfdff;
    border: 1px dashed #c0ccda;
    position: relative;
    .el-icon-plus {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .el-upload-list {
    .el-upload-list__item {
      width: 100px;
      height: 100px;
    }
  }
  .upload-tip {
    color: #b5b5b5;
    font-size: 12px;
    line-height: 1.4;
  }
}
</style>
